<template>
  <div >
    <div ref="editorElem" style="text-align:left;z-index:30;"></div>
    <WangImage ref="wangImage" @fileList="getChooseImg" />
  </div>
</template>
<script >
  import E from 'wangeditor'
  import WangImage from '@/components/WangImage'
  import bindDragImgSize from '@/components/WangImage/DragImage.js';
  import bindTooltipEvent from '@/components/WangImage/ClickImage.js';
  const { $, BtnMenu, DropListMenu, PanelMenu, DropList, Panel, Tooltip } = E
  export default {
    name: 'editorWang',
    components: {WangImage},
    data () {
      return {
        editor: null,
        tooltip: null,
        editorContent: '',
        showImage:false,
      }
    },
    comments:{
      WangImage
    },
    props: [ 'content'],    // 接收父组件的方法
    watch: {
      content () {
        this.editor.txt.html(this.content)
      },
    },
    mounted () {
      this.initWangeditor();
      this.editor.txt.html(this.content);
    },
    methods:{

      initWangeditor(){
        const self = this;
        this.editor = new E(this.$refs.editorElem)
        this.editor.config.onchange = (html) => {
          this.editorContent = html;
          this.$emit('html',  this.editorContent);
        }
        // 创建 class
        class SelfImage extends PanelMenu {
          constructor(editors) {
            const $elem = E.$(
              `
	                        <div class="w-e-menu" data-title="图片上传">
	                        <i class="w-e-icon-image"></i>
	                        </div>
	                    `
            );
            bindTooltipEvent(editors);
            bindDragImgSize(editors);
            super($elem, editors);
          }
          // 自定义菜单点击事件
          clickHandler() {
            self.open();
          }
          // 菜单激活状态
          tryChangeActive() {
            // this.active(); // 菜单激活
            // this.unActive() // 菜单不激活
          }
        }
        // 注册菜单
        this.editor.menus.extend("selfImage", SelfImage);
        // 重新配置 editor.config.menus
        this.editor.config.menus = this.editor.config.menus.concat("selfImage");
        this.editor.config.zIndex = 0;
        this.editor.config.zIndexFullScreen = 1002;
        //设置图片参数
        // this.editor.custom.uploadImgShowBase64 = true
        // this.editor.custom.uploadImgMaxSize = 3 * 1024 * 1024
        // this.editor.custom.uploadImgMaxLength = 5
        // // 关闭粘贴内容中的样式
        // this.editor.custom.pasteFilterStyle = false
        // // 忽略粘贴内容中的图片
        // this.editor.custom.pasteIgnoreImg = true
        this.editor.config.menus = [          // 菜单配置
          'head',  // 标题
          'bold',  // 粗体
          'fontSize',  // 字号
          'fontName',  // 字体
          'italic',  // 斜体
          'underline',  // 下划线
          'strikeThrough',  // 删除线
          'foreColor',  // 文字颜色
          'backColor',  // 背景颜色
          'link',  // 插入链接
          'list',  // 列表
          'justify',  // 对齐方式
          'quote',  // 引用
          'emoticon',  // 表情
          'selfImage',  // 自定义插入图片
          // 'image',  // 插入图片
          'table',  // 表格
          'code',  // 插入代码
          'undo',  // 撤销
          'redo',  // 重复
          'fullscreen', // 全屏
        ]
        // 下面是最重要的的方法

        this.editor.create()     // 创建富文本实例
        if (!this.content) {
          this.editor.txt.html('富文本编辑器')
        }
        //全屏 退出全屏
       //this.editor.fullscreen();
       //this.editor.unFullScreen();
        console.log(this.editor)
        console.log(this.editor.config)

      },

      open(){
        //组件自定义的事件
        this.editor.config.zIndex = 10;
        this.editor.config.zIndexFullScreen = 1000;
        this.$refs.wangImage.handleAdd();
      },
      getChooseImg(data){
        //选择图片后的回调
        data.split(",").forEach(item=>{
          this.editor.txt.append(`<img src=${item}> `)
        })
      }
    }
  }
</script>
<style lang="scss" rel="stylesheet/scss">
  #wangeditor {
    width: 50rem;
  }



  .w-e-text-container {
    overflow: hidden;
  }

  .w-e-img-drag-mask {
    position: absolute;
    z-index: 1;
    border: 1px dashed #ccc;
    box-sizing: border-box;

    .w-e-img-drag-rb {
      position: absolute;
      right: -5px;
      bottom: -5px;
      width: 16px;
      height: 16px;
      border-radius: 50%;
      background: #ccc;
      cursor: se-resize;
    }

    .w-e-img-drag-show-size {
      min-width: 110px;
      height: 22px;
      line-height: 22px;
      font-size: 14px;
      color: #999;
      position: absolute;
      left: 0;
      top: 0;
      background-color: #999;
      color: #fff;
      border-radius: 2px;
      padding: 0 5px;
    }
  }

</style>
